<template>
  <div class="article">
    <div class="container clearfix">
      <div class="welcome fl">您好，
        <span v-if="phone">
          <router-link to="/my/me" class="el-dropdown-link" style="color:#ff0000">
          <a style="color:#ff0000;">{{ userName }}</a>
          </router-link>
          <a @click="logout" class="logout">退出</a>
        </span>
        <em v-else>
          <router-link to="/login" class="dialogin">
            请登录
          </router-link>
          <router-link to="/register" class="register">
            免费注册
          </router-link>
        </em>
      </div>
      <div class="userEnter fr clearfix">
        <div class="site_nav item_my">
          <el-dropdown :hide-on-click="false">
            <router-link to="" class="el-dropdown-link" style="color:#ff0000">
              用户中心<i class="el-icon-arrow-down el-icon--right"></i>
            </router-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/my/order">我的订单</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/my/price">我的询价单</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/my/shipments">我的发货单</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <router-link to="/cart" class="site_nav item_cart" >
          <svg-icon icon-class="gowuche" class-name="gowuche" />我的购物车
        </router-link>
        <router-link v-if="role_type !== 'youke'" to='/my/VerifiedMember' class="site_nav item_cart" style="color:#ff0000">
          <span>申请成为卖家</span>
        </router-link>
        <router-link v-if="role_type === 'seller' || role_type === 'seller_subset'" to="/selleru/se_center" class="site_nav item_cart">
          <span>卖家中心</span>
        </router-link>
        <div class="site_nav item_wechat">
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              <svg-icon icon-class="shouji" class-name="shouji" />微信公众号
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <p class="site-nav-menu-bd">
                  <img src="../assets/img/gzhbj.jpg" alt="">
                </p>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="site_nav item_wechat">
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              <svg-icon icon-class="xiaochengxu" class-name="xiaochengxu" />微信小程序
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <p class="site-nav-menu-bd">
                  <img src="../assets/img/sjqr.jpg" alt="">
                </p>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="site_nav item_server">
          <svg-icon icon-class="phone" class-name="phone" />客服中心
          <em style="color:#ff0000">400-618-0107</em>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'Top',
  data () {
    return {
      userName: localStorage.getItem('__username__'),
      role_type:'youke',
    }
  },
  computed: {
    ...mapGetters(['phone'])
  },
  created() {
    let userInfo = JSON.parse(localStorage.getItem('__userInfo__'),)
    if(userInfo){
      this.role_type = userInfo.role_type
    }
    console.log(this.role_type)
   
  },
  activated() {
    this.userName = localStorage.getItem('__username__');
    this.role_type = 'youke'
  },
  watch: {
    $route: {
      handler (to, from) {
        if (from.path === '/login') {
          this.userName = localStorage.getItem('__username__')
        }
      }
    }
  },
  methods: {
    ...mapActions({
      fetchLogout: 'user/logout'
    }),
    logout () {
      this.fetchLogout().then(() => {
        this.$router.push('/login')
      })
    }

  }
}
</script>

<style scoped lang="scss">
.welcome {
  float: left;
  a {
    text-decoration:none;
    color: #747474;
  }
  .register {
    color: #ff0000;
  }
  a.dialogin:hover {
    color: #4448f8;
  }
}
.item_my {
  .el-dropdown-link {
    cursor: pointer;
    color: #4448f8;
  }
}
.el-dropdown-link {
    cursor: pointer;
  }
.el-icon-arrow-down {
  font-size: 12px;
}
.item_cart:hover{
  text-decoration: none;
  color: #4448f8;
  .svg-icon {
    color: #4448f8;
    font-size: 17px;
    vertical-align: -2px;
  }
}
.el-dropdown-menu__item a:hover {
    text-decoration: none;
    color: #4448f8;
}
.site_nav {
    position: relative;
    float: left;
    padding: 0 8px;
    margin: 0 4px;
    color: #707070;
    box-sizing: border-box;
    z-index: 9;
    font-size: 12px;
    .svg-icon {
      display: inline-block;
      font-size: 16px;
      margin-right: 5px;
    }
  .el-dropdown {
    font-size: 12px;
  }
  .el-dropdown:hover {
    cursor: pointer;
  }
}
.site_nav:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 12px;
    top: 50%;
    left: -5px;
    margin-top: -6px;
    background: #d1cfcf;
}

.site_nav:hover .site-nav-menu-bd {
    display: block;
    line-height: 1em!important;
    background: #fff;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #e6e6e6;
}
.site-nav-menu-bd {
  img {

  }
}
.item_server:hover {
  cursor: default;
}
.item_server {
  padding-right: 0;
  margin-right: 0;
  em {
    color: #4448f8;
    font-weight: bold;
    margin-left: 5px;
  }
}
  .logout {
    margin-left: 10px;
    cursor: pointer;
  }
</style>
